<template>
  <div class="user_right fl ml20">
    <div>
      <el-button @click="add_addres">新增收货地址</el-button>
    </div>
    <div class="shipping_body">
      <table>
        <colgroup>
          <col width="30" />
          <col width="90" />
          <col width="180" />
          <col width="170" />
          <col width="305" />
          <col width="136" />
        </colgroup>
        <tbody>
          <tr class="tr_body_top">
            <th>
              <input
                class="padd20"
                type="checkbox"
                name="vehicle"
                value="Bike"
                id="check-all"
                @click="switchItem()"
              />
            </th>
            <th>收货人</th>
            <th>联系电话</th>
            <th>所在地区</th>
            <th>详细地址</th>
            <th>操作</th>
          </tr>
        </tbody>
        <tbody>
          <tr class="tr_body_content" v-for="(item,index) in addressList" :key="item.id">
            <td>
              <input type="checkbox" class="check-item padd20" name="vehicle" value="Bike" />
            </td>
            <td>{{item.contact_name}}</td>
            <td>{{item.contact_phone}}</td>
            <td>{{item.province}}{{item.city}}{{item.district}}</td>
            <td>{{item.address}}</td>
            <td>
              <el-link type="primary" @click="modify_address(index)">修改</el-link>
              <el-link type="danger" @click="delete_address(item)">删除</el-link>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <el-dialog title="新增收货地址" :visible.sync="shipping_address">
      <el-form :model="new_address" :rules="rule_address" ref="new_address">
        <div class="popup_body">
          <div>
            <span>收货人</span>
            <el-form-item prop="contact_name">
              <el-input class="ipt280" v-model="new_address.contact_name" placeholder="请输入收货人"></el-input>
            </el-form-item>
          </div>
          <div>
            <span>联系人电话</span>
            <el-form-item prop="contact_phone">
              <el-input class="ipt280" v-model="new_address.contact_phone" placeholder="请输入联系人电话"></el-input>
            </el-form-item>
          </div>
          <div style="padding-left: 155px;">
            <span>所属地区</span>
            <el-form-item prop="province">
              <el-select
                class="select140"
                style="margin-right: 10px;"
                v-model="new_address.province"
                placeholder="请选择"
                @change="select_the"
              >
                <el-option
                  v-for="item in options"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="city">
              <el-select
                class="select140"
                @change="select_city"
                style="margin-right: 10px;"
                v-model="new_address.city"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="district">
              <el-select class="select140" v-model="new_address.district" placeholder="请选择">
                <el-option
                  v-for="item in regionLsit"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <span>详细地址</span>
            <el-form-item prop="address">
              <el-input
                class="textarea280"
                type="textarea"
                :rows="5"
                placeholder="请输入详细地址"
                v-model="new_address.address"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <el-button type="primary" @click="save_address('new_address')">保存</el-button>
            <el-button @click="shipping_address = false">取 消</el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProvinceList,
  getAddress,
  addAddress,
  updateAddress,
  delAddress,
} from "@/api/user";
export default {
  data() {
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regMobile.test(value)) {
        return callback();
      }
      callback(new Error("请输入合法的手机号"));
    };
    return {
      shipping_address: false,
      options: [],
      cityList: [],
      regionLsit: [],
      type: "",
      new_address: {
        province: "",
        contact_name: "",
        city: "",
        contact_phone: "",
        address: "",
        district: ""
      },
      addressList: [],
      rule_address: {
        contact_name: [
          { required: true, message: "请输入收货人", trigger: "blur" }
        ],
        contact_phone: [
          { required: true, validator: checkMobile, trigger: "blur" }
        ],
        province: [{ required: true, message: "请选择省份", trigger: "blur" }],
        city: [{ required: true, message: "请选择市区", trigger: "blur" }],
        district: [{ required: true, message: "请选择城市", trigger: "blur" }],
        address: [
          { required: true, message: "请填写详细地址", trigger: "blur" }
        ]
      }
    };
  },

  created() {
    this.accessAreas();
    this.btnGetAddress();
  },

  methods: {
    switchItem() {
      var checkAll = document.getElementById("check-all");
      var items = document.getElementsByClassName("check-item");
      //因为是多个多选框，所以需要遍历，不需要下标，可以用forof循环
      for (var item of items) {
        item.checked = checkAll.checked;
      }
    },
    // 删除
    delete_address(item) {
      this.$confirm("此操作将永久删除该地址, 是否继续?", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning"
      })
        .then(() => {
          delAddress(item).then(e => this.btnGetAddress())
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    // 获取地址
    async accessAreas() {
      const res = await getProvinceList();
      this.options = res;
    },

    // 选择省份
    select_the(e) {
      for (let key in this.options) {
        if (this.options[key].name === e) {
          this.cityList = this.options[key].children;
          this.new_address.city = this.options[key].children[0].name;
          this.regionLsit = this.options[key].children[0].children;
          this.new_address.district = this.options[
            key
          ].children[0].children[0].name;
        }
      }
    },

    // 选择市区
    select_city(e) {
      for (let key in this.cityList) {
        if (this.cityList[key].name === e) {
          this.regionLsit = this.cityList[key].children;
          this.new_address.district = this.cityList[key].children[0].name;
        }
      }
    },

    // 保存地址
    save_address(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.shipping_address = false;
          if (this.type === "add") {
            addAddress(this.new_address).then(e => this.btnGetAddress());
          } else if (this.type === "modify") {
            updateAddress(this.new_address).then(e => this.btnGetAddress());
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async btnGetAddress() {
      const res = await getAddress();
      this.addressList = res;
    },

    // 新增地址
    add_addres() {
      for (let key in this.new_address) {
        this.new_address[key] = "";
      }
      this.shipping_address = true;
      this.type = "add";
    },

    // 编辑地址
    async modify_address(index) {
      this.shipping_address = true;
      this.new_address = this.addressList[index];
      this.type = "modify";
    }
  }
};
</script>

<style lang="scss" scope>
.user_right {
  padding-bottom: 50px;
}
.el-button {
  background: #4448f8;
  color: #fff;
  width: 150px;
  height: 32px;
  float: right;
  margin-top: 25px;
  margin-right: 15px;
}
.shipping_body {
  margin-top: 91px;
  display: flex;
  justify-content: center;
}
.tr_body_top {
  height: 50px;
  background: #eeeeee;
}
.tr_body_content {
  text-align: center;
  height: 50px;
  border-bottom: 2px dashed #eeeeee;
}
.el-link {
  margin: 0 5px;
}
.popup_body {
  > div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 35px;
    font-size: 16px;
    > span {
      width: 100px;
      text-align: right;
      margin-right: 30px;
      &::before {
        content: "*";
        margin-right: 3px;
        color: red;
      }
      &::after {
        content: ":";
        margin-left: 2px;
        font-weight: 600;
      }
    }
  }
}
.ipt280 {
  width: 280px;
  .el-input__inner {
    height: 40px;
  }
}
.textarea280 {
  width: 280px;
}
.select140 {
  width: 140px;
  .el-input__inner {
    height: 40px;
  }
}
.padd20 {
  margin-left: 20px;
}
</style>